<template>
	<view>
		<u-navbar title="修改密码" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="main">
			<view class="topBox">
				<span class="emailc">邮箱账号</span>
				<!--  <u-icon name="arrow-right"></u-icon> -->
				<view>{{userInfo.email}}</view>
			</view>
			<view class="inbox">
				<u--form :model="pwd" ref="pwdForm" :rules="rules">
					<u-form-item prop="oldPd" borderBottom>
						<u--input v-model="pwd.oldPd" border='none' type="password" placeholder="请输入原始密码" clearable></u--input>
					</u-form-item>
					<u-form-item prop="newPd1" borderBottom>
						<u--input v-model="pwd.newPd1" border='none' type="password" placeholder="请输入新密码" clearable></u--input>
					</u-form-item>
					<u-form-item prop="newPd2" borderBottom>
						<u--input v-model="pwd.newPd2" border='none' type="password" placeholder="请确认新密码" clearable></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="text">
				<span>8-16位密码,同时包含数字,字母,符号</span>
				<span>至少包含两种类型</span>
			</view>
			<u-button class="button" @click="updPwd" text='修改密码'></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				pwd: {
					oldPd: '',
					newPd1: '',
					newPd2: ''
				},
				rules: {
					oldPd: [{
							required: true,				//必须填写
							message: '请输入原始密码',
							trigger: ['blur', 'change'], //触发方式
						},
						{
							min: 6,
							message: '密码不少于6位',
							trigger: ['change', 'blur'], //触发方式
						}
					],
					newPd1: [{
							required: true,				//必须填写
							message: '请输入新密码',
							trigger: ['change', 'blur'], //触发方式
						},
						{
							min: 6,
							message: '密码不少于6位',
							trigger: ['change', 'blur'], //触发方式
						}
					],
					newPd2: [{
							required: true,
							message: '请输入原始密码',
							trigger: ['change', 'blur'], //触发方式
						},
						{
							min: 6,
							message: '密码不少于6位',
							trigger: ['change', 'blur'], //触发方式
						},
						{
							validator: (rule, value, callback) => {
								if (this.pwd.newPd1 != value)
									callback(new Error('密码不一致'))
								else {
									callback()
								}
							},
							trigger: ['change', 'blur'],
						}
					]
				},
				name: 'Account',
			}
		},
		computed: {
			// getEmail(){
			// 	let result=this.$store.state.userInfo.email
			// 	return result
			// }
			...mapGetters(['userInfo'])
		},
		methods: {
			updPwd() {
				this.$refs.pwdForm.validate().then(res => {
					let data = {
						oldPd: this.pwd.oldPd,
						newPd: this.pwd.newPd1
					}
					this.$store.dispatch('updatePwd', data).then(ret => {
						if (ret[0] == 'success') {
							this.$tools.cleanToken()
							this.$tools.toast('修改成功')
							setTimeout(() => {
								this.$Router.replaceAll({
									name: 'login'
								})
							}, 800)

						} else {
							this.$tools.toast(ret[0])
						}
					})
				})

			},
		}

	}
</script>

<style lang="scss" scoped>
	.main {
		height: 100%;
		width: 100%;

		.topBox {
			height: 6rem;
			background: white;
			margin: 1.5rem 1rem 0 1rem;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border-radius: 1rem;
			font-size: 1.5rem;
			box-shadow: 5px 5px 3px grey;
		}

		.inbox {
			display: flex;
			flex-direction: column;
			margin: 2.5rem 1rem 1rem 1rem;
			background-color: white;
			padding: 0.5rem 0.5rem;

		}

		.text {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 2.5rem 1rem 1rem 1rem;
		}

		.button {

			position: fixed;
			bottom: 11rem;
			left: calc(50% - 45%);

			width: 90%;
			background-color: $uni-color-theme-6;
			border-radius: 2rem;

		}
	}
</style>
